<template>
<div ref="myChart" id="myChart">
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
	mounted(){
		let myChart = echarts.init(this.$refs.myChart)
		// myChart.on('click','series.line',(params)=>{
		// 	console.log(params)
		// })
		myChart.on('click',{name:'数码',seriesIndex:1},(params)=>{console.log(params)})
		//2.设置echarts数据
		//设置轴
		let xData = ['美食','数码','日化','蔬菜'];
		let yData = [99,67,45,87];
		//3.设置配置项
		let option = {
			// animation:true,//开启动画 默认为true
			// animationThreshold:4,//动画阈值 只有大于等于柱状图个数才有动画效果 
			// animationDuration:5000,//动画时间
			// animationDelay:2000,//动画延迟时间
			// animationEasing:"linear",//时间过渡曲线
			title:{
				text:'主标题',
				x:'center'
			},
			xAxis:{
				//配置x轴的参数
			type:'value'
			},
			yAxis:{
				//配置y轴的参数
				data:xData,
				type:'category' //坐标轴的类型。value数据轴 category类目轴

			},
			legend: {
        show: true,//设置图列的开启或者关闭
        icon: "circle",
        top: '5%',//设置位置
        itemWidth: 10,
        itemHeight: 20,
        textStyle: {
          color: 'red',
          fontSize: 10,
          backgroundColor: 'yellow'
        }
   },
			series:[
				//系列 配置图表类型
				{
					name:'销量',
					type:'bar',//系列类别
					data:yData,
					barWidth:20,//设置宽度
					//单独设置每个轴的颜色
					itemStyle:{
						normal:{
							color:function(params){
								console.log(params)
								let colorList = [
									'#c23531',
									'#2f4554',
									'#61a0a8',
									'#91c7ae'
								]
								return colorList[params.dataIndex]
							}
						}
					},
					//最大值、最小值
					markPoint:{
						data:[
							//标注的数据数组，每一项都是一个对象
							{
								type:"max",
								name:'最大值'
							},
							{
								type:"min",

								name:'最小值'
							}
						]
					},
					//图表的标线
					markLine:{
						data:[
							{
								type:'average',//平均值
								name:'平均值'
							}
						]
					}
				},
				{
					data:[150,230,224,135,89],
					type:'line',//折线图
				}
			]
		}
		//4设置图表,绘制图表
		myChart.setOption(option)

	}

}
</script>
<style scoped>
#myChart{
	width: 500px;
	height: 500px;
	border:1px solid red;
}
</style>
